<template>
	<div>
		<el-container>
		  <el-aside width="280px" style="background-color: #fff; border: 1px solid #e5e5e5; margin-right: 20px; padding: 10px;">
			  <el-row>
			  	<el-col :span="24" class="flex-row-left">
			  		<el-input class="w-200 mr-10" placeholder="输入名称搜索" clearable />
			  		<el-button type="primary"><el-icon class="mr-5"><Search /></el-icon>查询</el-button>
			  	</el-col>	
			  </el-row>
			  <el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">
			  	<el-table-column type="selection" width="55" />	
			  	<el-table-column prop="name" label="序号"  />
			  	<el-table-column prop="date" label="姓名" width="120" />
			  </el-table>
			  <div class="flex-row-center mt-20">
				 <el-pagination
				   layout="prev, next"
				   :total="400"
				 />
			  </div>
		  </el-aside>
		  <el-main style="background-color: #FFF;">
			  <el-row :gutter="20">
			  	<el-col :span="12" class="flex-row-left">
			  		<el-input class="w-200 mr-10" placeholder="输入名称搜索" clearable />
			  		<el-button type="primary"><el-icon class="mr-5"><Search /></el-icon>查询</el-button>
			  	</el-col>			
			  	<el-col :span="12" class="flex-row-right">
			  		<el-button type="primary" plain @click="add"><el-icon class="mr-5"><Plus /></el-icon>新建</el-button>
					<el-button plain @click="add"><el-icon class="mr-5"><Download /></el-icon>导入</el-button>
					<el-button plain @click="add"><el-icon class="mr-5"><Upload /></el-icon>导出</el-button>
			  		<el-button><el-icon class="mr-5"><Delete /></el-icon>批量删除</el-button>
			  	</el-col>
			   </el-row>
			   <el-table :data="tableData" v-loading="loading" class="mt-20" border :header-cell-style="{ backgroundColor:'#f8f8f8'}">
			   	<el-table-column type="selection" width="55" />	
			   	<el-table-column prop="id" label="ID"  width="55"/>
			   	<el-table-column prop="id" label="客户编码"  />
			   	<el-table-column prop="id" label="客户名称" width="120" />
			   	<el-table-column prop="id" label="客户简称" width="120"/>
			   	<el-table-column prop="id" label="联系人" width="120"/>
			   	<el-table-column prop="id" label="法人" width="120"/>
				<el-table-column prop="id" label="联系电话" width="120"/>
				<el-table-column prop="id" label="邮箱" width="120"/>
				<el-table-column prop="id" label="微信号" width="120"/>
				<el-table-column prop="id" label="QQ" width="120"/>
				<el-table-column prop="id" label="客户地址" width="120"/>
			   </el-table>
			   <div class="flex-row-right mt-20">
			  	 <el-pagination
			  	   :page-sizes="[100, 200, 300, 400]"
			  	   layout="total, sizes, prev, pager, next, jumper"
			  	   :total="400"
			  	 />
			   </div>
			   <cateForm 
			   :dialogVisible="dialogVisible" 
			   :width="40" 
			   @dialogVisibleByValue="dialogVisibleByValue"  
			   ref="cateForm"
			   />
		  </el-main>
		</el-container>
	</div>
</template>

<script>
	import cateForm from '@/components/basic/employees/cate/form.vue'
	export default{
		components:{
			cateForm,
		},
		data(){
			return {
				loading:true,
				dialogVisible:false,
				value5:false,
				tableData:[],
			}
		},		
		created() {
			this.getList();
		},
		methods:{
			add(){
				this.dialogVisible =  true;
				this.$nextTick(() => {
					
				});
			},
			dialogVisibleByValue (dialogVisible) {
				this.dialogVisible = dialogVisible
			},
			getList(){
				let that = this;
				setTimeout(() => {
				    that.tableData = [
				      {
				    	id: 1,
				      },
				      {
				    	id: 2,
				      },
				      {
				    	id: 3,
				      },
				      {
				    	id: 4,
				      },
				      {
				    	id: 5,
				      },
				      {
				      	id: 6,
				      },
				      {
				      	id: 7,
				      },
				      {
				      	id: 8,
				      },
				      {
				      	id: 9,
				      },
				      {
				      	id: 10,
				      },
				    ];
				    that.loading = false;
				}, 2000)
			}
		},
	}
</script>
<style>
</style>